<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport">
		<title>用户后台管理</title>

		<link rel="stylesheet" href="u-admin/dist/modules/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="u-admin/dist/modules/ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="u-admin/dist/modules/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css">

		<link rel="stylesheet" href="u-admin/dist/modules/summernote/summernote-lite.css">
		<link rel="stylesheet" href="u-admin/dist/modules/flag-icon-css/css/flag-icon.min.css">
		<link rel="stylesheet" href="u-admin/dist/css/demo.css">
		<link rel="stylesheet" href="u-admin/dist/css/style.css">
	</head>

	<body>
		<div id="app">
			<div class="main-wrapper">
				<div class="navbar-bg"></div>



				<div th:replace="commons/u-admin-bar::#navbar(message=${messages})"></div>
				<div th:replace="commons/u-admin-bar::#sidebar(currUri='index',newMessageCount=${newMessageCount})"></div>

				<div class="main-content">
					<section class="section">
						<h1 class="section-header">
							<div><i class="ion ion-speedometer"></i> 仪表盘</div>
						</h1>
						<div class="row">
							<div class="col-lg-3 col-md-6 col-12">
								<div class="card card-sm-3">
									<div class="card-icon bg-warning">
										<i class="ion ion-paper-airplane"></i>
									</div>
									<div class="card-wrap">
										<div class="card-header">
											<h4>总计发表</h4>
										</div>
										<div class="card-body">
											<a href="all-published-articles" th:text="${publishedCount}"></a>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-3 col-md-6 col-12">
								<div class="card card-sm-3">
									<div class="card-icon bg-danger">
										<i class="ion ion-chatbox-working"></i>
									</div>
									<div class="card-wrap">
										<div class="card-header">
											<h4>消息</h4>
										</div>
										<div class="card-body">
											<a href="">-</a>
										</div>
									</div>
								</div>
							</div>

							<div class="col-lg-3 col-md-6 col-12">
								<div class="card card-sm-3">
									<div class="card-icon bg-success">
										<i class="ion ion-star"></i>
									</div>
									<div class="card-wrap">
										<div class="card-header">
											<h4>关注</h4>
										</div>
										<div class="card-body">
											<a href="#">-</a>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-3 col-md-6 col-12">
								<div class="card card-sm-3">
									<div class="card-icon bg-primary">
										<i class="ion ion-person-stalker"></i>
									</div>
									<div class="card-wrap">
										<div class="card-header">
											<h4>粉丝</h4>
										</div>
										<div class="card-body">
											<a href="#">-</a>
										</div>
									</div>
								</div>
							</div>

						</div>
						<div class="row">
							<div class="col-12 col-md-6 col-lg-6">
								<div class="card">
									<div class="card-header">
										<h4>访问量与阅读量 <i class="icon ion-eye"></i></h4>
									</div>
									<div class="card-body">
										<canvas id="myChart"></canvas>
									</div>
								</div>
							</div>
							<div class="col-12 col-md-6 col-lg-6">
								<div class="card">
									<div class="card-header">
										<h4>今日访问者地图 <i class="icon ion-location"></i><span id="visitor" style="color: #DC3545"></span></h4>
									</div>
									<div class="card-body">
										<div class="itemCon" style="overflow: hidden;text-align: center">
											<div style="width: 100%;margin: 0 auto" id="ChinaMap"></div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-lg-8 col-md-12 col-12 col-sm-12" th:if="${articles.size() > 0}">
								<div class="card">
									<div class="card-header">
										<div class="float-right">
											<a href="all-published-articles" class="btn btn-primary">全部文章</a>
										</div>
										<h4>最新发表 <i class="icon ion-paper-airplane"></i></h4>
									</div>
									<div class="card-body">
										<div class="table-responsive">
											<table class="table table-striped">
												<thead>
													<tr>
														<th style="width: 20%">标题</th>
														<th style="width: 15%">时间</th>
														<th style="width: 15%">阅读数</th>
														<th style="width: 15%">状态</th>
														<th style="width: 15%">可见性</th>
														<th style="width: 20%">操作</th>
													</tr>
												</thead>
												<tbody style="font-weight: 300">
													<tr th:each="article:${articles}">
														<td>
															[[${article.articleTitle}]]
															<div class="table-links">
																<div class="bullet"></div>
																<a th:href="@{/read-article(uId=${article.userId},uName=${session.loginUser.userName},aId=${article.articleId},title=${article.articleTitle})}">查看文章 </a>
															</div>
														</td>
														<td th:text="${#dates.format(article.getPublishTime(),'yyyy-MM-dd HH:mm')}">
															2020-01-15 上午11:47
														</td>
														<td th:text="${article.readCount}"></td>
														<td th:if="${article.getArticleStatus() == 0}" th:text="发布"></td>
														<td th:if="${article.getArticleStatus() == 1}" th:text="草稿"></td>
														<td th:if="${article.getArticleStatus() == 2}" th:text="回收站"></td>
														<td th:if="${article.secret == true}">私密</td>
														<td th:if="${article.secret == false}">公开</td>
														<td>
															<a th:href="@{/edit-article(articleId=${article.articleId})}" class="btn btn-primary btn-action mr-1" data-toggle="tooltip" title="编辑"><i class="ion ion-edit"></i></a>
															<a th:if="${article.getArticleStatus() != 2}" th:href="@{/delete-article(articleId=${article.articleId})}" class="btn btn-danger btn-action" data-toggle="tooltip" title="移入回收站"><i class="ion ion-android-sync"></i></a>
															<a th:if="${article.getArticleStatus() == 2}" th:href="@{/completely-delete-article(articleId=${article.articleId})}" class="btn btn-danger btn-action" data-toggle="tooltip" title="永久删除"><i class="ion ion-trash-b"></i></a>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-12 col-12 col-sm-12" th:if="${messages.size() > 0}">
								<div class="card">
									<div class="card-header">
										<div class="float-right">
											<a href="#" class="btn btn-primary">消息中心</a>
										</div>
										<h4>最新消息 <i class="icon ion-chatbubble-working"></i></h4>
									</div>
									<div class="card-body">
										<ul class="list-unstyled list-unstyled-border">
											<li th:each="m:${messages}" class="media">
												<img class="mr-3 rounded-circle" width="50"  th:src="${m.fromUser.imagePath}" alt="avatar">
												<div class="media-body">
													<div class="media-title" th:text="${m.fromUser.userName}"></div>
													<small th:if="${m.message.getArticleLikeId() != -1}" >
														点赞了你的 <b th:text="${m.articleTitle}"></b>
													<div class="time" th:text="${#dates.format(m.message.messageTime,'yyyy-MM-dd HH:mm')}"></div>
													</small>
													<small th:if="${m.message.getArticleCommentId() != -1}" >
														评论了 <b th:text="${m.articleTitle}"></b>
														内容如下： <b th:text="${m.commentContent}"></b>
													<div class="time" th:text="${#dates.format(m.message.messageTime,'yyyy-MM-dd HH:mm')}"></div>
													</small>
													<small th:if="${m.message.getFollowId() != -1}" >
														关注了你
													<div class="time" th:text="${#dates.format(m.message.messageTime,'yyyy-MM-dd HH:mm')}"></div>
													</small>
												</div>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
						</div>
					</section>
				</div>
				<div th:replace="commons/u-admin-bar::#footer"></div>
			</div>
		</div>
		<div id="statisticR" style="display: none" th:text="${statisticR}"></div>
		<div id="statisticV" style="display: none" th:text="${statisticV}"></div>
		<script src="u-admin/dist/modules/jquery.min.js"></script>
		<script type="text/javascript">
			$(function () {

				var data = [(${regions})];
				$('#ChinaMap').SVGMap({
					mapName: 'china',
					stateData: data,
					mapWidth: 300,
					mapHeight: 280,
					hoverCallback: function (stateData, obj) {
						$('#HoverCallback1').html(stateData);
					},
					stateTipHtml: function (mapData, obj) {
						$('#visitor').html(obj.name+":"+mapData[obj.id].sum)
					}
				});
			});
		</script>
		<script src="u-admin/dist/modules/popper.js"></script>
		<script src="u-admin/dist/modules/tooltip.js"></script>
		<script src="u-admin/dist/modules/bootstrap/js/bootstrap.min.js"></script>
		<script src="u-admin/dist/modules/nicescroll/jquery.nicescroll.min.js"></script>
		<script src="u-admin/dist/modules/scroll-up-bar/dist/scroll-up-bar.min.js"></script>
		<script src="u-admin/dist/js/sa-functions.js"></script>

		<script src="u-admin/dist/modules/chart.min.js"></script>
		<script src="u-admin/dist/modules/summernote/summernote-lite.js"></script>
		<script>
			var ctx = document.getElementById("myChart").getContext('2d');
			var statisticR = eval($('#statisticR').html());
			var statisticV = eval($('#statisticV').html());
			var datesR =new Array();
			var countsR =new Array();
			var datesV =new Array();
			var countsV =new Array();
			for (let i = 0; i < statisticV.length; i++) {
				var dateTempV = new Date(statisticV[i]["date"]);
				datesV[i] =  dateTempV.getFullYear()+"-"+dateTempV.getMonth()+"-"+dateTempV.getDate();
				countsV[i] = statisticV[i]["count"];
				for (let j = 0; j < statisticR.length; j++) {
					if (statisticV[i]["date"] == statisticR[j]["date"]){
						countsR[i] = statisticR[j]["count"];
						console.log("日期相同"+statisticV[i]["date"]+"访问量："+statisticR[j]["count"]);
						break;
					}else {
						countsR[i] = 0;
					}
				}
			}
			var myChart = new Chart(ctx, {
				type: 'line',
				data: {
					labels: datesV,
					datasets: [{
						label: '访问量',
						data: countsV,
						borderWidth: 2,
						backgroundColor: 'rgba(41, 128, 185,0.1)',
						borderWidth: 2.5,
						pointBackgroundColor: '#e74c3c',
						pointRadius: 4
					},{
						label: '阅读量',
						data: countsR,
						borderWidth: 2,
						backgroundColor: 'rgba(142, 68, 173,1.0)',
						borderWidth: 2.5,
						pointBackgroundColor: '#2980b9',
						pointRadius: 4
					}]
				},
				options: {
					legend: {
						display: false
					},
					scales: {
						yAxes: [{
							ticks: {
								beginAtZero: true,
								stepSize: 10
							}
						}],
						xAxes: [{
							ticks: {
								display: false
							},
							gridLines: {
								display: false
							}
						}]
					},
				}
			});
		</script>
		<script src="u-admin/dist/js/scripts.js"></script>
		<script src="u-admin/dist/js/custom.js"></script>
		<script src="u-admin/dist/js/demo.js"></script>
		<script src="plug-ins/map/js/lib/SyntaxHighlighter.js"></script>
		<script src="plug-ins/map/js/lib/raphael-min.js"></script>
		<script src="plug-ins/map/js/res/chinaMapConfig.js"></script>
		<script src="plug-ins/map/js/map.js"></script>
	</body>
</html>
